<template>
	<view class="fswl-main business">
		<view>
			<view class="top-body">
				<view class="top-search">
					<view class="left-canvas w140" @click="goRecordEcharts">
						<view class="content">
							<image class="img"
								src="https://fireware-1257276602.cos.ap-guangzhou.myqcloud.com/fsw-wx-lmini/icons/dataIco.png"
								mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
						</view>
					</view>
					<view class="search  w-140 mr30">
						<text class="iconfont .icon-sousuo"></text>
						<input class="weui-input w480" @confirm="inputEnterHandle" confirm-type="search"
							v-model="query.name" placeholder="请输入工单名称" />
						<image @click="clearInputHandle" class="w36 h36 mr20"
							src="https://fireware-1257276602.cos.ap-guangzhou.myqcloud.com/fsw-wx-lmini/icons/delico.png"
							mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
					</view>
				</view>

				<view class="twoTabs">
					<view class="item" :class="{'on':workTypeData == 0}">
						<view class="nav" @click="tabChangHandle(0)">巡检</view>
					</view>
					<view class="item" :class="{'on':workTypeData == 1}">
						<view class="nav" @click="tabChangHandle(1)">维保维修</view>
					</view>
				</view>
			</view>

			<view class="business-box">
				<view class="classify-tab">
					<view class="left">
						<picker @change="priorityChangeHandle" range-key="label" :value="priorityIndex"
							:range="priorityList">
							<view class="picker">
								<text>优先级:{{ priorityList[priorityIndex].label }}</text>
								<image
									src="https://fireware-1257276602.cos.ap-guangzhou.myqcloud.com/fsw-wx-lmini/icons/icons/Polygon_2.png"
									mode="" />
							</view>
						</picker>
					</view>
					<view class="right">
						<picker @change="statusChangeHandle" range-key="label" :value="statusIndex" :range="statusList">
							<view class="picker">
								<text>状态:{{ statusList[statusIndex].label }}</text>
								<image
									src="https://fireware-1257276602.cos.ap-guangzhou.myqcloud.com/fsw-wx-lmini/icons/icons/Polygon_2.png"
									mode="" />
							</view>
						</picker>
					</view>
				</view>
				<scroll-view :scroll-y="true" :lower-threshold="10" @scrolltolower="scrollHandle"
					class="classify-body work-page-class">
					<view @click="workDetailHandle(item)" v-if="dataList.length" v-for="(item,index) in dataList"
						class="item global_box">
						<view class="left">
							<view class="left-item-1">
								<text
									class="title">{{ item.name.length > 10 ? item.name.slice(0,10)+ '...' : item.name }}</text>
								<view class="level status-box level-1">
									{{ item.level==0 ? '一般' : item.level==1 ? '重要' : item.level==2 ? '紧急' : '' }}
								</view>
								<view class="status status-box level-3">
									{{ item.cycleType==0 ? '临时' : '计划' }}
								</view>
							</view>
							<view class="left-item-3">
								{{ item.startDate }}
							</view>
						</view>
						<view class="right" :class="{
							'level-2' : item.stepDefineFlag=='take_step' || item.stepDefineFlag=='waiting_step' || item.stepDefineFlag=='execute_step' || item.stepDefineFlag=='suspend_step',
							'level-1' : item.stepDefineFlag=='close_step',
							'level-4' : item.stepDefineFlag=='finish_step',
						}">
							{{ item.stepName }}
						</view>
					</view>
					<view v-if="!dataList.length" style="text-align: center;color:#333;margin-top: 30rpx;">
						暂无数据
					</view>
				</scroll-view>
				<!-- 	<view style="bottom:100rpx;right:50rpx" class="add-work-menu" bindtouchmove="ballMoveEvent">
				</view> -->
				<view style="bottom:100rpx;right:50rpx" @click="ballMoveEvent" class="add-work-menu">
				</view>
			</view>

		</view>
		<!-- <view wx:else class="noPermission">请联系管理人员获取权限</view> -->
	</view>
</template>

<script>
	import {
		request
	} from "../../request/index.js"
	export default {
		data() {
			return {
				workTypeData: 0,
				priorityIndex: 0,
				priorityList: [{
						label: "全部",
						value: -1
					},
					{
						label: "一般",
						value: 0
					},
					{
						label: "重要",
						value: 1
					},
					{
						label: "紧急",
						value: 2
					},
				],
				statusList: [{
						label: "全部",
						value: -1
					},
					{
						label: "审核",
						value: "audit_step"
					},
					{
						label: "接单",
						value: "take_step"
					},
					{
						label: "待处理",
						value: "waiting_step"
					},
					{
						label: "暂停",
						value: "suspend_step"
					},
					{
						label: "执行",
						value: "execute_step"
					},
					{
						label: "验收",
						value: "accept_step"
					},
					{
						label: "完成",
						value: "finish_step"
					},
					{
						label: "结束",
						value: "close_step"
					},
				],
				statusIndex: 0,
				srcollStatus: false,
				query: {
					pageIndex: 1,
					pageSize: 6,
					projectId: uni.getStorageSync('project') || "16154516457903604960000255341083",
					groupFlagNames: ['XJ', 'JH-XJ'],
					name: ""
				},
				flagList: [
					['XJ', 'JH-XJ'],
					['BY', 'WX', 'JH-BY'],
				],
				total: 0,
				pages: 0,
				dataList: [],
				screenWidth: undefined,
				screenHeight: undefined
			}
		},
		onLoad() {
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.screenHeight = res.windowHeight
					_this.screenWidth = res.screenWidth
				}
			})
			this.getList()
		},
		methods: {
			tabChangHandle(index) {
				if (this.workTypeData == index) return
				this.workTypeData = index
				this.query.groupFlagNames = this.flagList[index]
				this.dataList = []
				this.total = 0
				this.pages = 0
				this.query.pageIndex = 1
				this.getList()
			},
			inputEnterHandle() {
				this.getList()
			},
			clearInputHandle() {
				this.query.name = ""
				this.getList()
			},
			priorityChangeHandle(e) {
				const index = e.detail.value
				this.priorityIndex = index

				this.getList()
			},
			statusChangeHandle(e) {
				const index = e.detail.value
				this.statusIndex = index

				this.getList()
			},
			async scrollHandle() {
				if (this.srcollStatus || (this.query.pageIndex == this.pages)) {
					return
				}
				this.srcollStatus = true
				this.query.pageIndex = this.query.pageIndex + 1

				const res = await this.getList(true)

				if (res.status == 0) {
					this.dataList = [...this.dataList, ...res.payload.records]
					this.total = res.payload.total
					this.pages = res.payload.pages
					this.$nextTick(() => {
						this.srcollStatus = false
					})
				} else {
					uni.showToast({
						title: '获取工单数据失败!',
						icon: 'none',
						duration: 2000,
					})
				}
			},
			async getList(status) {
				//  获取优先级参数
				if (this.priorityList[this.priorityIndex].value == -1) {

					this.query.level = undefined
				} else {
					this.query.level = this.priorityList[this.priorityIndex].value
				}

				//  获取状态参数
				if (this.statusList[this.statusIndex].value == -1) {
					this.query.stepDefineFlag = undefined
				} else {
					this.query.stepDefineFlag = this.statusList[this.statusIndex].value
				}

				const res = await request({
					url: "api/oct/wemini/bus/workOrder/page",
					method: "POST",
					data: this.query
				})
				console.log('res', res);
				if (res.status == 0) {
					if (status) {
						return res
					} else {
						this.total = res.payload.total
						this.pages = res.payload.pages
						this.dataList = res.payload.records
					}
				} else {
					uni.showToast({
						title: '获取工单数据失败!',
						icon: 'none',
						duration: 2000,
					})
				}
			},
			workDetailHandle(item) {
				uni.navigateTo({
					url: `../workDetail/workDetail?checkObj=${JSON.stringify(item)}`
				})
			},
			ballMoveEvent() {
				uni.navigateTo({
					url: '../add-work/add-work'
				})
			},
			goRecordEcharts() {
				uni.navigateTo({
				  url: '../businessrecords/businessrecords'
				})
			}
		}
	}
</script>

<style lang="less">
	.business {

		// padding: 150rpx 0 0;
		// box-sizing: border-box;
		.top-body {

			// position: absolute;
			// top: 0;
			// left: 0;
			.top-search {
				image {
					width: 40rpx;
					height: 40rpx
				}
			}
		}


		.business-box {
			padding: 24rpx 40rpx 0 40rpx;
			position: relative;

			.classify-tab {
				padding: 0 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 10rpx;
				height: 56rpx;
				background-color: #fff;
				font-size: 24rpx;

				>view {
					position: relative;
					display: flex;
					align-items: center;

					text {
						margin-right: 10rpx;
					}

					image {
						width: 18rpx;
						height: 11rpx;
					}
				}

				.left {
					.businessDownMenu {
						right: 0;
						top: 50rpx;
					}
				}

				.right {}
			}

			.classify-body {
				height: calc(100vh - 350rpx);

				.item {
					margin-top: 24rpx;
				}
			}

			.add-work-menu {
				z-index: 100;
				position: absolute;
				right: 50rpx;
				bottom: 100rpx;
				background-color: @main_bg;
				opacity: 0.5;
				border-radius: 50%;
				width: 108rpx;
				height: 108rpx;
			}
		}

	}
</style>